<template>
  <div id="flex">
    <el-row>
      <el-col :span="8" :offset="8">
        <el-card class="pad">
          <h1 style="text-align: center">欢迎使用校园闲置二手后台管理系统</h1>
          <el-form
            :rules="rules"
            style="text-align: center"
            ref="loginForm"
            :model="form"
          >
            <el-form-item prop="uaccount">
              <el-input v-model="form.uaccount" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="upassword">
              <el-input
                type="password"
                v-model="form.upassword"
                placeholder="密码"
              ></el-input>
            </el-form-item>
            <el-form-item prop="type">
              <el-radio-group v-model="form.type">
                <el-radio label="0">系统管理员</el-radio>
                <el-radio label="1">商品管理员</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="rem">
              <el-checkbox-group v-model="form.rem">
                <el-checkbox true-label="1" false-label="0"
                  >记住密码</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">登陆</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import loginApi from '@/http/loginApi';
export default {
  data() {
    return {
      form: {
        uaccount: 'admin',
        upassword: '',
        type: '0',
        rem: '1',
      },
      rules: {
        uaccount: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur',
          },
          {
            min: 2,
            max: 15,
            message: '长度在 2 到 15 个字符',
            trigger: 'blur',
          },
        ],
        upassword: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
          {
            min: 3,
            max: 15,
            message: '长度在 3 到 15 个字符',
            trigger: 'blur',
          },
        ],
        type: [
          {
            required: true,
            message: '请选择至少一个类型',
            trigger: 'change',
          },
        ],
      },
    };
  },

  methods: {
    onSubmit() {
      this.$refs['loginForm'].validate(valid => {
        if (valid) {
          loginApi.login(this.form).then(res => {
            if (res.data.code == 200) {
              sessionStorage.setItem('token', res.data.token);
              this.$store.commit('SET_MENUS_ACTIVE', '/welcome.html');
              this.$store.commit('SET_TYPE', this.form.type);

              this.$router.replace('/welcome.html');
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
    resetForm() {
      this.$refs['loginForm'].resetFields();
    },
  },
};
</script>
<style scope>
#flex {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pad {
  padding: 20px !important;
}
</style>
